<template>
	<view :style="Theme">
		<uni-nav-bar :statusBar="true" :fixed="true" title="技术转移" />
		<!-- banner图 -->
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration" :circular="circular" indicator-active-color="#fff">
			<swiper-item v-for="(item,index) in bannerList" :key="index" @click="goBannerDetail(item)">
				<image class="images" :src="item.url" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="container">
			<view class="yuandd">
				<!-- 技术图谱 -->
				<view class="section yuandi" style="margin-bottom: 0;">
					<image class="yuandi_bg" v-if="activeTab1===0" src="/static/images/new13.png" mode="widthFix"></image>
					<image class="yuandi_bg" v-if="activeTab1===1" src="/static/images/new11.png" mode="widthFix"></image>
					<view class="tab-bar yuandi_bgccc">
						<view v-for="(item,index) in caseProjectTypeList" :class="['tab', activeTab1 === index ? 'active' : '']" @click="activeTabHandle1(item,index)">
							<view>{{item.name}}</view>
							<image class="bixia_img" v-if="activeTab1 === index" src="/static/images/new12.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<!-- 行业类别 -->
				<view class="section" style="width: 100%; padding: 20rpx; box-sizing: border-box;">
				<view class="section-title leibie">
					<!-- <text class="iconfont">&#xe60a;</text> -->
					行业类别
				</view>
				<view class="tab-bar">
					<view v-for="(item,index) in industryList" class="heyidd" :class="['tab', activeTab2 === index ? 'active' : '']"
						@click="activeTabHandle2(item,index)">
						{{item.industryName}}
					</view>
				</view>
			</view>
			</view>
			
			<!-- 案例时间轴 -->
			<view class="section">
				<view class="section-title">
					<text class="iconfont">&#xe60a;</text>
					案例时间轴
				</view>
				<view v-for="item in caseList" :key="item.id" class="case-card" @click="goDetail(item)">
					<view class="case-header">
						<!-- <text class="star">★</text> -->
						<view class="titie_11">{{ item.title }}</view>
						
					</view>
					<!-- <video v-if="item.videoUrl" id="myVideo" :src="item.videoUrl" @error="videoErrorCallback"
						:danmu-list="danmuList" enable-danmu danmu-btn controls></video> -->
					<view class="uploader">
						<text>上传人：{{ item.realName || '' }}</text>
						<text class="date" style="margin-left: 40rpx;">{{ item.createdAt }}</text>
					</view>
					<view class="tag">{{ item.projectDesc }}</view>
				</view>
				<view class="mian_2" v-if="caseList.length===0">
					<view class="nodata">
						<image class="nodata_img" src="/static/images/index_22.png" mode="widthFix"></image>
						<view class="nodata_c">暂无数据</view>
					</view>
				</view>
			</view>
		</view>
		<view class="dibukong"></view>
		<view class="dibu" style="display: flex;justify-content: space-between;">
			<button class="upload-btn" @click="showTan(0)">上传技术案例</button>
			<button class="publish-btn" @click="showTan(1)">发布技术需求</button>
		</view>
		<!-- 上传技术案例弹框 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content">
				<image class="close_img" @click="hideTan" src="/static/images/close.png" mode="widthFix"></image>
				<view class="title">上传{{typename}}</view>
				<form>
					<view class="form-item">
						<text class="label required">标题</text>
						<textarea class="input" v-model="form.title" placeholder="标题" style="height: 100rpx;"
							maxlength="10000" />
					</view>
					<view class="form-item">
						<text class="label required">描述</text>
						<textarea class="input" v-model="form.projectDesc" placeholder="描述" style="height: 100rpx;"
							maxlength="10000" />
					</view>
					<view class="form-item">
						<text class="label required">行业</text>
						<picker :range="industryList" v-model="form.industryId" @change="onIndustryChange"
							range-key="industryName" :value="selectIndex">
							<view class="picker">
								{{ form.industryId ? industryList[selectIndex].industryName : '请选择' }}
							</view>
						</picker>
					</view>
					<view class="form-item">
						<text class="label">图片</text>
						<view class="example-body">
							<uni-file-picker @select="select" @delete="deleteFile" :value="picList"
								file-mediatype="image"></uni-file-picker>
						</view>
					</view>
					<view class="form-item">
						<text class="label">视频</text>
						<view class="example-body">
							<uni-file-picker @select="select" @delete="deleteFile" :value="videoList"
								file-mediatype="video"></uni-file-picker>
						</view>
					</view>
					<view class="form-item">
						<text class="label">pdf模版</text>
						<view class="xiaza">
							<view class="xiazali" v-for="(item,index) in TemplateList" :key="index">
								<view class="xiaza_z">{{item.fileName}}</view>
								<view class="xiaza_y" @click="downloadFdf(item.fileUrl)">预览文件</view>
							</view>
						</view>
					</view>
					<view class="form-item">
						<text class="label">文档</text>
						<view class="example-body">
							<uni-file-picker @select="select" @delete="deleteFile" :value="docList"
								file-mediatype="all"></uni-file-picker>
						</view>
					</view>
					<button class="submit-btn" @click="onSubmit">提交</button>
				</form>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import alert from '@/common/sju.alert.js'
	export default {
		data() {
			return {
				// banner图设置参数
				indicatorDots: true,
				circular: true,
				autoplay: true,
				interval: 1500,
				duration: 500,
				bannerList: [],
				typename: '技术需求',
				uploadUrl: 'https://tts.farmerfriend.cn/wxapi/wx/storage/upload',
				activeTab1: 0,
				activeTab2: 0,
				caseProjectTypeList: [{
						id: 0,
						name: '技术案例'
					},
					{
						id: 1,
						name: '技术需求'
					}
				],
				searchForm: { //技术转移查询列表
					page: 1,
					limit: 100,
					caseProjectType: 0,
					industryId: 0
				},
				caseList: [],
				form: {
					title: '', //标题
					projectDesc: '', //案例描述
					caseProjectType: 0, //0发布技术， 1发布需求
					industryId: 0, //行业id
					videoFiles: [], //视频文件列表
					docFiles: [], //文档文件列表
					picFiles: [] //图片文件列表
				},
				picList: [], //图片列表
				videoList: [], //视频列表
				docList: [], //文件列表
				industryList: [],
				selectIndex: 0,
				TemplateList: [] //案例pdf下载模板

			}
		},
		onLoad() {
			this.getAllIndustry() //获取行业列表
			this.getBanner() //获取banner
		},
		onShow() {
			this.getOfflineCourseListFun();
			
		},
		methods: {
			// 跳转banner详情
			goBannerDetail(item) {
				uni.navigateTo({
					url: '/sub_common/pages/bannerDetail?id=' + item.id
				})
			},
			// 获取banner列表
			getBanner() {
				this.sjuRequest("wx/banners/getBannerByPosition", 'POST', {
					position: 2
				}).then(res => {
					console.log(res)
					this.bannerList = res.data
				})
			},
			// 获取案例pdf下载模板
			getOfflineCourseListFun() {
				this.sjuRequest("/wx/fileTemplate/getFileTemplate", 'POST', {
					templateType: 0
				}).then(res => {
					console.log('获取pdf模版')
					console.log(res)
					this.TemplateList = res.data.list
				})
			},
			// 切换技术图谱
			activeTabHandle1(item, index) {
				this.activeTab1 = index
				this.searchForm.caseProjectType = item.id
				this.getCaseProjectListFun() //技术转移查询
			},
			// 切换行业
			activeTabHandle2(item, index) {
				this.searchForm.industryId = item.id
				this.activeTab2 = index
				this.getCaseProjectListFun() //技术转移查询
			},
			// 获取行业列表
			getAllIndustry() {
				this.sjuRequest("/wx/industry/getAllIndustry", 'GET', {}).then(res => {
					console.log('获取行业列表')
					console.log(res)
					// this.bannerList = res.data
					this.industryList = res.data.records
					this.searchForm.industryId = this.industryList[0].id
					this.getCaseProjectListFun()
				})
			},
			// 获取技术转移列表数据
			getCaseProjectListFun() {
				this.sjuRequest("/wx/caseProject/getCaseProjectList", 'POST', this.searchForm).then(res => {
					console.log('获取行业列表')
					console.log(res)
					this.caseList = res.data.records
				})
			},
			// 跳转技术案例详情
			goDetail(item) {
				console.log('跳转技术案例详情')
				console.log(item)
				uni.navigateTo({
					url: '/sub_technology/pages/technologyDetail?id=' + item.id
				})
			},
			// 下载pdf
			downloadFdf(fileUrl) {
				console.log('下载的pdf地址')
				console.log(fileUrl)
				uni.showLoading({
					title: '正在加载中..'
				})
				uni.downloadFile({
					url: fileUrl,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
								uni.hideLoading()
							},
						});
					},
					complete: function(r) {
						uni.hideLoading()
					}
				});
			},

			showTan(caseProjectType) {
				console.log(uni.getStorageSync('token'))
				console.log(uni.getStorageSync('isUserUpdateFlag'))
				this.sjuRequest("wx/user/getCurrentUserUpdateFlag", 'POST', {}).then(res => {
					console.log('app-判断当前用户是否更新信息')
					console.log(res)
					uni.setStorageSync('isUserUpdateFlag', res.data)
					// this.bannerList = res.data
				})
				// 需要先判断登录,并已上传个人信息
				if (!uni.getStorageSync('token') || !uni.getStorageSync('isUserUpdateFlag')) {
					uni.showToast({
						title: '请先登录并上传个人信息',
						icon: 'none'
					})
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/tab/my/my'
						})
					}, 1000)
					return
				}

				if (caseProjectType === 1) {
					this.typename = '技术需求'
				} else {
					this.typename = '技术案例'
				}
				this.$refs.popup.open()
				// 清空数据
				this.form = {
						title: '', //标题
						projectDesc: '', //案例描述
						caseProjectType: 0, //0发布技术， 1发布需求
						industryId: 0, //行业id
						videoFiles: [], //视频文件列表
						docFiles: [], //文档文件列表
						picFiles: [] //图片文件列表
					},
					this.picList = [];
				this.videoList = [];
				this.docList = [];
				this.form.caseProjectType = caseProjectType
			},
			onIndustryChange(e) {
				this.selectIndex = e.detail.value
				this.form.industryId = this.industryList[e.detail.value].id
				console.log('选择的行业id')
				console.log(this.form.industryId)
			},

			uploadSuccess(res) {
				console.log('上传成功', res);
			},
			uploadFail(err) {
				console.error('上传失败', err);
			},

			//选择图片---
			selectPic(e) {
				console.log('选择文件--图片')
				console.log(e)
				const tempFilePaths = e.tempFilePaths;
				const imgUrl = tempFilePaths[0]
				this.picList = tempFilePaths
			},
			select(e) {
				console.log('选择文件')
				console.log(e)
				const tempFiles = e.tempFiles;
				const tempFilePaths = e.tempFilePaths;
				if (tempFiles[0].fileType === 'image') {
					this.picList = tempFiles
				} else if (tempFiles[0].fileType === 'video') {
					this.videoList = tempFiles
				} else {
					this.docList = tempFiles
				}
				this.uploadFilePic()
			},
			// 删除
			deleteFile(e) {
				console.log('删除文件')
				console.log(e)
				const index = e.index
				const fileType = e.tempFile.fileType
				console.log('删除的文件类型')
				console.log(fileType)
				console.log(index)
				if (fileType === 'image') {
					this.picList.splice(index, 1)
					console.log(this.picList)
				} else if (fileType === 'video') {
					this.videoList.splice(index, 1)
					console.log(this.videoList)
				} else {
					this.docList.splice(index, 1)
					console.log(this.docList)
				}
				this.uploadFilePic()
			},

			uploadFilePicPre(url, type) {
				uni.showLoading({
					title:'上传中',
					mask:true
				})
				let obj = {}
				uni.uploadFile({
					//图片上传地址
					url: this.uploadUrl,
					filePath: url,
					//上传名字，注意与后台接收的参数名一致
					name: 'file',
					//设置请求头
					header: {
						"Content-Type": "multipart/form-data"
					},
					//请求成功，后台返回自己服务器上的图片地址
					success: (uploadFileRes) => {
						
						console.log('uploadFileRes', JSON.parse(uploadFileRes.data));
						//处理数据
						const path = JSON.parse(uploadFileRes.data)
						console.log('看一看---')
						if(path.errno===0){
							uni.hideLoading()
							console.log(path)
							obj = {
								fileId: path.data.id,
								fileUrl: path.data.url
							}
							if (type === 'image') {
								this.form.picFiles.push(obj)
							} else if (type === 'video') {
								console.log('视频走没有')
								this.form.videoFiles.push(obj)
								console.log(this.form.videoFiles)
							} else {
								this.form.docFiles.push(obj)
							}
						}
						
					}
				});
			},

			uploadFilePic() {
				this.form.picFiles = []
				this.form.videoFiles = []
				this.form.docFiles = []
				if (this.picList.length > 0) {
					for (let i = 0; i < this.picList.length; i++) {
						this.uploadFilePicPre(this.picList[i].path, 'image')
					}
				}
				if (this.videoList.length > 0) {
					for (let i = 0; i < this.videoList.length; i++) {
						this.uploadFilePicPre(this.videoList[i].path, 'video')
					}
				}
				if (this.docList.length > 0) {
					for (let i = 0; i < this.docList.length; i++) {
						this.uploadFilePicPre(this.docList[i].path, '')
					}
				}
			},

			async onSubmit() {
				console.log('调用前');
				console.log(this.form)
				// return
				// 判空
				if (this.form.title === '' || this.form.projectDesc === '' || this.form.industryId === 0) {
					alert.showInfo('请填写完整')
					return
				}
				uni.showLoading({
					mask: true,
					title: '上传中'
				})
				let that = this
				setTimeout(function() {
					that.sjuRequest("/wx/caseProject/uploadCaseProject", 'POST', that.form).then(res => {
						console.log('上传技术案例')
						console.log(res)
						// this.bannerList = res.data
						// this.industryList = res.data.records
						if (res.errno === 0) {
							uni.showToast({
								icon: 'success',
								title: '已上传，待审核'
							})
							that.$refs.popup.close()
							that.getCaseProjectListFun() //技术转移查询
						}
					})
				}, 1000)
			},
			hideTan() {
				this.$refs.popup.close()
			}

		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		padding-bottom: 0;
	}

	/* 轮播图 */
	.swiper {
		width: 100%;
		height: 300rpx;
		margin-bottom: 20rpx;

	}

	swiper-item {
		width: 100%;
		height: 300rpx;
	}

	swiper-item image {
		width: 100%;
		height: 300rpx;
	}

	.section {
		margin-bottom: 40rpx;
	}

	.section-title {
		font-weight: bold;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.tab-bar {
		display: flex;
		flex-wrap: wrap;
	}

	.tab {
		width: 47%;
		text-align: center;
		padding: 16rpx;
		border-radius: 16rpx;
		/* background: #f0f4fa; */
		margin-right: 16rpx;
		box-sizing: border-box;
		margin-bottom: 10rpx;
		font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
		font-weight: 400;
		font-size: 34rpx;
		color: #222222;
		line-height: 70rpx;
		position: relative;
	}

	.tab.active {
		/* background: #e6f7ff;
		color: #1890ff; */
		font-weight: 700;
		font-size: 34rpx;
		color: #222222;
	}

	.upload-btn {
		width: 330rpx;
		height: 80rpx;
		background: #018BFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}
.bixia_img{
	    width: 174rpx;
	    height: auto;
	    position: absolute;
	    top: 20px;
	    left: 41px;
}
	.publish-btn {
		width: 330rpx;
		height: 80rpx;
		background: #00D1B7;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
	}

	.case-card {
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx #eee;
		margin-bottom: 24rpx;
		padding: 20rpx;
	}

	.case-header {
		/* display: flex; */
		align-items: center;
		margin-bottom: 12rpx;
	}

	.titie_11 {
		width: 100%;
		margin-bottom: 10rpx;
		font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
		font-weight: 500;
		font-size: 30rpx;
		color: #111111;
	}

	.star {
		color: #fadb14;
		margin-right: 8rpx;
	}

	.tag {
		border-radius: 8rpx;
		padding: 8rpx 8rpx;
		font-size: 20rpx;
		width: auto;
		display: inline-block;
		font-size: 24rpx;
		color: #666666;
		line-height: 35rpx;
	}

	.date {
		margin-left: auto;
		color: #888;
		font-size: 20rpx;
	}

	.case-img {
		width: 100%;
		height: 160rpx;
		background: #eee;
		margin-bottom: 12rpx;
	}

	.uploader {
		font-size: 22rpx;
		color: #999999;
		margin-bottom: 14rpx;
	}

	#myVideo {
		width: 100%;
		height: 200rpx;
	}

	.dibu {
		width: 100%;
		height: 240rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		    display: flex;
		    justify-content: space-between;
		    position: fixed;
		    bottom: 0;
		    height: 135rpx;
		    border-bottom: 1rpx solid #eee;
	}

	.dibukong {
		width: 100%;
		height: 200rpx;
	}

	.popup-content {
		width: 600rpx;
		height: 80vh;
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		padding-bottom: 40rpx;
		overflow: auto;
		margin-top: 12vh;
		position: relative;
	}

	.title {
		font-size: 34rpx;
		color: #1749d6;
		margin: 20rpx auto;
		width: 100%;
		text-align: center;
		font-weight: bold;
	}

	.form-item {
		margin-bottom: 40rpx;
	}

	.label {
		font-size: 28rpx;
	}

	.required::before {
		content: '*';
		color: #f00;
		margin-right: 4rpx;
	}

	.input {
		border: 1px solid #eee;
		border-radius: 8rpx;
		padding: 16rpx;
		margin-top: 8rpx;
	}

	.picker {
		border: 1px solid #eee;
		border-radius: 8rpx;
		padding: 16rpx;
		margin-top: 8rpx;
	}

	.upload-section {
		display: flex;
		align-items: center;
	}

	.upload-section button {
		margin-right: 20rpx;
	}

	.submit-btn {
		width: 100%;
		background: #1749d6;
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
		margin-top: 40rpx;
	}

	/deep/ wx-button[type=primary] {
		background-color: #1749d6 !important;
	}

	.label {
		display: block;
		margin-bottom: 10rpx;
		font-weight: bold;
	}

	.xiaza {
		width: 100%;
		padding: 20rpx 0;
		padding-bottom: 0;
	}

	.xiazali {
		width: 100%;
		display: flex;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		justify-content: space-between;
	}

	.xiaza_y {
		width: 140rpx;
		border-radius: 10rpx;
		color: #1749d6;
		text-align: center;
	}

	.close_img {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		width: 60rpx;
		height: 60rpx;
	}
	.yuandd{
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
	}
	.yuandi{
		width: 100%;
		height: 112rpx;
		position: relative;
	}
	.yuandi_bg{
		width: 100%;
		height: 112rpx;
		position: absolute;
		top:0;
		left: 0;
	}
	.yuandi_bgccc{
		width: 100%;
		height: 112rpx;
		position: relative;
		z-index: 99;
	}
	.leibie{
		font-weight: 500;
		font-size: 26rpx;
		color: #666666;
	}
	.heyidd{
		width: 315rpx;
		height: auto;
		background: #F4F6FA;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #111111;
		text-align: center;
		padding: 10rpx 0;
		margin-bottom: 20rpx;
	}
	.heyidd.active{
		background-color: rgba(48, 175, 230, 0.15);
		font-weight: 400;
		font-size: 26rpx;
		color: #30AFE6;
	}
	.nodata_c {
		font-size: 26rpx;
		color: #666666;
	}
	
</style>